<template>
    <component is="a-modal" v-model:visible="visible" width="70%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <a-descriptions title="用户信息" bordered :column="4">
            <a-descriptions-item label="ID" :span="1">{{ paramsData.id }} ( {{ paramsData.state_text }}
                )</a-descriptions-item>
            <a-descriptions-item label="审核备注" :span="1">{{ paramsData.msg }}</a-descriptions-item>
            <a-descriptions-item label="申请时间" :span="1">{{ paramsData.create_time }}</a-descriptions-item>
            <a-descriptions-item label="处理时间" :span="1">{{ paramsData.auth_time }}</a-descriptions-item>
            <a-descriptions-item label="闪转积分" :span="1"><span style="color:red">{{ paramsData.points_text
                    }}</span></a-descriptions-item>
            <a-descriptions-item label="闪转出去数量" :span="1"> <span style="color:red">{{ paramsData.number
                    }}</span></a-descriptions-item>
            <a-descriptions-item label="获得数量" :span="1"><span style="color:red">{{ paramsData.get_num
                    }}</span></a-descriptions-item>
            <a-descriptions-item label="转出会员" :span="4"> <span>
                    ID:{{ paramsData.to_user?.id }} || {{ paramsData.to_user?.user_name }} || {{
                        paramsData.to_user?.true_name }}</span></a-descriptions-item>
            <a-descriptions-item label="转入会员" :span="4">
                ID:{{ paramsData.get_user?.id }} || {{ paramsData.get_user?.user_name }} || {{
                    paramsData.get_user?.true_name }}
            </a-descriptions-item>
            <!-- <a-descriptions-item label="異常信息" :span="1"><span style="color:red">{{ paramsData.err_msg
                    }}</span></a-descriptions-item> -->
        </a-descriptions>
        <!-- <div class="photoList">
            <div class="photo" v-if="paramsData?.face_url">
                <span>任脸检测</span>
                <a-image class="img" :src="paramsData?.face_url"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.auth_face_url">
                <span>实名人脸检测</span>
                <a-image class="img" :src="paramsData?.auth_face_url"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.user_face_url">
                <span>证件正面照</span>
                <a-image class="img" :src="paramsData?.user_face_url"></a-image>
            </div>
        </div> -->
        <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="margin-top: 30px;">
            <div v-if="mode == 'check'">
                <a-form-item label="审核操作" field="state">
                    <sa-radio @change="getChange" v-model="formData.state" :data="STATE"></sa-radio>
                </a-form-item>
                <a-form-item label="审核备注" field="admin_note">
                    <a-input v-model="formData.admin_note" placeholder="审核失败时填写" />
                </a-form-item>
                <a-form-item label="操作密码" field="admin_pay_password">
                    <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="谷歌验证码" field="google_code">
                    <a-input v-model="formData.google_code" placeholder="请输入" />
                </a-form-item>
            </div>
        </a-form>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import memberApi from '@/api/system/member'
import SaRadio from '@cps/sa-radio/index.vue'
import ENUMS from '@/utils/enums'
import { throttle } from 'lodash'
const paramsData = ref({})
// 获取角色组列表
const getParams = async () => {
    const { data } = await memberApi.transfer_detail_params(formData.id)
    paramsData.value = { ...data.info }
    console.log('1', paramsData.value);
}
const emit = defineEmits(['success'])
// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)
const roleData = ref([])

let title = computed(() => {
    return (mode.value == 'detail' ? '闪转详情' : '审核')
})
const STATE = [
    { value: 0, title: '待审核' },
    { value: 1, title: '通过审核(已转账给对方)' },
    { value: 2, title: '不通过审核(退回金额)' },
]
const COST = [
    { value: 0, title: '不退回手续费' },
    { value: 1, title: '要退回手续费' },
]
// 表单信息
const formData = reactive({
    state: 0,
    admin_note: '',
    admin_pay_password: '',
    google_code: '',
    id: ''
})

// 验证规则
const rules = ref({
    admin_pay_password: [{ required: true, message: '请输入' }],
    google_code: [{ required: true, message: '请输入' }],
    state: [{ required: true, message: '请选择' }],
    admin_note: [{ required: false, message: '请输入' }],

});
// 打开弹框
const open = async (type, data) => {
    paramsData.value = {}
    mode.value = type
    visible.value = true
    formRef.value.resetFields()
    formData.id = data.id
    await initPage()
    await getParams()

}
const getChange = () => {
    formData.return_cost = null
}

// 初始化页面数据
const initPage = async () => {
}

// 数据保存
const submit = async (done) => {
    if (mode.value == 'check') {
        const validate = await formRef.value?.validate()
        if (!validate) {
            loading.value = true
            try {
                let data = { ...formData }
                let result = await memberApi.transfer_audit(data)
                if (result.code === 200) {
                    Message.success('操作成功')
                    emit('success')
                    visible.value = false
                    done(true)
                }
                // 防止连续点击提交
                setTimeout(() => {
                    loading.value = false
                }, 500)
            } catch {
                loading.value = false
            }
        }
        done(false)
    } else {
        done(true)
    }
}

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open })
</script>
<style lang="less" scoped>
.photoList {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    justify-content: center;

    .photo {
        width: 180px;
        height: 180px;
        text-align: center;
        color: #5c7cfa;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 4px;
        margin-right: 100px;

        .img {
            margin-top: 15px;
        }
    }
}
</style>
